<template>
  <div id="love-transform-only">
   <c-title :text="currency_name+'充值'+love_name"></c-title>
    <div class="love-transform">
      <div class="rechangeable">可充值{{currency_name}}:{{ currency_total }}</div>
      <div class="pay-count">
        <p>充值数量</p>
        <input type="text" v-model="count" placeholder="0.00" />
        <p class="scale">手续费:{{ fee_tip }}</p>
      </div>
    </div>
    <van-button class="pay-btn" :loading="loading" :disabled="loading" @click="recharge">充值</van-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      currency_name:"",
      currency_total: 0,
      count: '',
      fee_tip: 0,
      loading:false
    }
  },
  activated(){
    this.getInfo()
  },
  methods: {
    recharge(){
      this.loading=true;
      $http.post("plugin.love-speed-pool.frontend.recharge.recharge",{change_value:this.count,value:this.$route.params.value}).then(res => {
        this.loading=false;
        if(res.result){
          this.$toast(res.msg)
        }else{
          this.$toast(res.msg)
        }
      })
    },
    getInfo(){
      $http.get("plugin.love-speed-pool.frontend.recharge.index",{value:this.$route.params.value}).then(res => {
        if(res.result){
          this.currency_total = res.data.currency_total;
          this.currency_name = res.data.currency_name;
          this.love_name = res.data.love_name;
          this.fee_tip = res.data.fee_tip;
        }else{
          this.$toast(res.msg)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>

#love-transform-only {
  .pay-btn {
    background: #f00b0b;
    color: #fff;
    width: 18.9375rem;
    height: 2.375rem;
    margin-top: 1.6875rem;
    border-radius: 0.25rem;
    border: none;
  }

  .love-transform {
    background: #fff;
    padding-left: 0.6875rem;

    .scale {
      font-size: 0.75rem;
      color: #867e7e;
      padding-bottom: 0.9375rem;
    }

    .rechangeable {
      text-align: left;
      padding: 0.4375rem 0 0.375rem 0;
      border-bottom: 0.0625rem solid #edf1f2;
      margin-bottom: 0.8125rem;
    }

    .pay-count {
      text-align: left;

      input {
        border: none;
        margin: 0.4375rem 0;
        padding-left: 0.5rem;
      }
    }
  }
}
</style>